<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
        
            width: 800px;
            border:  1px red solid;
            /* 
                text-align 文字的水平对齐
                    可选值：
                        left 左侧对齐
                        right 右对齐
                        center 居中对齐
                        justify 两端对齐
            
            */
            /* text-align:  justify; */
            font-size: 50px;
        }
        span{
            font-size: 20px;
            border: 1px blue solid;
            /* 
            vertical-align 
            可选值：
                baseline 默认值 基线（文字会有一个基线顶着）对齐
                top 顶部对齐
                bottom 底部对齐
                middle 居中对齐（跟字母x中间对齐）


            
            */
            vertical-align: 10px;
        }
        p{
            border: 1px red solid;
            /* 会出现图片的基线
                因为img是替换元素，跟子差不多
            */
        }
        img{
            vertical-align: bottom;
        }
    </style>

</head>
<body>
    <div>今天天气dello<span>针卜挫hello</span>！
    </div>
    <!-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat assumenda iste aliquid veniam nisi repudiandae, atque, recusandae quisquam minima quibusdam voluptatum. Amet ex dolores repellendus ipsum neque quasi repellat nisi?</div> -->
    <p><img src="../01_introduce/img/狗卷.jpeg" alt=""></p>
</body>
</html>